<template>
    <!-- <scroll-view scroll-y :style="[{ maxHeight: viewHeight + 'px;' }]"> -->
    <view style="position: relative">
        <view class="list-flex">
            <view class="left-box">
                <block v-for="(item, index) in productLeftData" :key="index">
                    <view class="product-box" v-if="isOpen || index < 2"
                    @click='itemClick(item)'
                    :data-spmCntSuffix="'.correlationProduct.itemClick@'"
                    :data-custom="index+1"
                    :data-spm="item">
                        <view class="img-box">
                            <image class="product-img" :src="item.imageUrl" mode="aspectFill" />
                            <!-- <view class="product-type">{{ item.recTitle }}</view> -->
                            <img class="product-type" :src="item.iconUrl" alt="" srcset="">
                            <view class="distance-box">
                                <img class="address-icon" src="https://cdn1.visiotrip.com/h5AndMini/2024-06-06/address-icon.png" alt="" srcset="">
                                距离景点{{ item.distance }}
                            </view>
                        </view>
                        <view class="info-box">
                            <view class="product-name">{{ item.recTitle }}</view>
                            <view class="sales-volume">
                                <view class="product-price">
                                    <view class="price-2">{{ item.priceInfo.currency }}</view>
                                    <view class="price-3">{{ item.priceInfo.price }}</view>
                                    <view class="price-4">{{ item.priceInfo.description }}</view>
                                </view>
                                <view>已售{{ item.salesVolume }}</view>
                            </view>
                        </view>
                    </view>
                </block>
            </view>
            <view class="right-box">
                <block v-for="(item, index) in productRightData" :key="index">
                    <view class="product-box" v-if="isOpen || index < 2" @click='itemClick(item)'
                    :data-spmCntSuffix="'.correlationProduct.itemClick@'"
                    :data-custom="index+1"
                    :data-spm="item">
                        <view class="img-box">
                            <image class="product-img" :src="item.imageUrl" mode="aspectFill" />
                            <img class="product-type" :src="item.iconUrl" alt="" srcset="">
                            <view class="distance-box">
                                <img class="address-icon" src="https://cdn1.visiotrip.com/h5AndMini/2024-06-06/address-icon.png" alt="" srcset="">
                                距离景点{{ item.distance }}
                            </view>
                        </view>
                        <view class="info-box">
                            <view class="product-name">{{ item.recTitle }}</view>
                            <view class="sales-volume">
                                <view class="product-price">
                                    <view class="price-2">{{ item.priceInfo.currency }}</view>
                                    <view class="price-3">{{ item.priceInfo.price }}</view>
                                    <view class="price-4">{{ item.priceInfo.descr }}</view>
                                </view>
                                <view>已售{{ item.salesVolume }}</view>
                            </view>
                        </view>
                    </view>
                </block>
            </view>
        </view>
        <view
            class="more"
            v-if="list.length > 4 && !isOpen"
            @click="() => {isOpen = !isOpen}"
            :data-spmCntSuffix="'.correnlationOpen@'"
            :data-custom="1"
            :data-spm="{'pos': '查看更多'}"
        >
            <view class="more-bg"></view>
            <view class="more-box">
                <text class="more-text">{{isOpen ? '收起' : '查看更多'}}</text>
                <uni-icons :type="!isOpen ? 'bottom':'top'" color="#666666" size="14"></uni-icons>
            </view>
        </view>
    </view>
    <!-- </scroll-view> -->
</template>

<script>

export default {
    props: {
        list: {
            type: Array,
            default: []
        },
        viewHeight: {
            type: Number
        }
    },
    components: {

    },
    computed: {
        productLeftData: {
            get() {
                let leftData = []
                for (let i = 0; i < this.list.length; i++) {
                    if (i % 2) { } else { leftData.push(this.list[i]); }
                }
                return leftData
            }
        },
        productRightData: {
            get() {
                let rightData = []
                for (let i = 0; i < this.list.length; i++) {
                    if (i % 2) { rightData.push(this.list[i]) }
                }
                return rightData
            }
        }
    },
    data() {
        return {
            isOpen: false,
        };
    },
    onLoad() { },
    methods: {
        itemClick(item){
            console.log('11111111111')
            this.$emit('tapHandle',item)
        }
    }
};
</script>

<style lang="scss" scoped>
.list-flex {
    display: flex;
    width: 694rpx;
    margin: 0 auto;
    justify-content: space-between;
    .left-box,
    .right-box {
        width: 338rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

}

.product-box {
    width: 338rpx;
    min-height: 452rpx;
    background: #FFFFFF;
    border-radius: 26rpx;
    margin-bottom: 20rpx;
    .img-box {
        position: relative;

        .product-img {
            width: 338rpx;
            height: 338rpx;
            border-radius: 30rpx 30rpx 0 0;
            overflow: hidden;
        }
        .distance-box{
            width: 338rpx;
            height: 60rpx;
            background: linear-gradient( 180deg, rgba(19,19,40,0) 0%, rgba(19,19,40,0.6) 100%);
            border-radius: 0rpx 0rpx 26rpx 26rpx;
            position: absolute;
            bottom: 0;
            left: 0;
            color: #FFFFFF;
            font-size: 20rpx;
            line-height: 60rpx;
            display: flex;
            align-items: center;
            padding-left: 16rpx;
            .address-icon{
                width: 20rpx;
                height: 20rpx;
            }
        }
        .product-type {
            position: absolute;
            width: 88rpx;
            height: 36rpx;
            left: 0;
            top: 0;
            font-size: 24rpx;
            color: #FFFFFF;
            text-align: center;
            line-height: 47rpx;
        }
    }

    .info-box {
        padding: 0 15rpx;
        .sales-volume{
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            color: #767697;
            font-size: 20rpx;
            margin-bottom: 20rpx;
        }
        .product-name {
            font-size: 28rpx;
            color: #404062;
            padding: 20rpx 0;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            /* 这里是超出几行省略 */
            overflow: hidden;
            font-weight: bold;
        }

        .distance {
            max-width: 215rpx;
            // display: flex;
            // align-items: center;
            padding: 2rpx  15rpx;
            background: #FFF2EC;
            color: #FF4F01;
            font-size: 20rpx;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            /* 这里是超出几行省略 */
            overflow: hidden;
        }

        .product-price {
            display: flex;
            align-items: baseline;
            // padding: 0 0 20rpx 0;

            .price-1 {
                color: $sl-color-grey;
                font-size: 20rpx;
            }

            .price-2 {
                color: #F93F55;
                font-size: 24rpx;
                font-weight: bold;
            }

            .price-3 {
                color: #F93F55;
                font-size: 36rpx;
                font-weight: bold;
            }

            .price-4 {
                color: #999999;
                font-size: 20rpx;
            }
        }
    }

}
.more {
    width: 100%;
    margin-top: -98rpx;
    position: absolute;
    background: linear-gradient( 180deg, rgba(246,246,249,0) 0%, #F6F6F9 100%);
    .more-bg {
        width: 694rpx;
        height: 88rpx;
        background: linear-gradient( 180deg, rgba(246,246,249,0) 0%, #F6F6F9 100%);
        margin: 0 auto;
    }
    .more-box {
        width: 160rpx;
        // height: 50rpx;
        background: #FFFFFF;
        border-radius: 10rpx;
        text-align: center;
        padding: 13rpx 0;
        margin: 0 auto;
        .more-text {
            font-weight: 500;
            font-size: 24rpx;
            color: #767697;
            line-height: 24rpx;
        }
    }
}
</style>
